<template>
  <div>
    <a-button type="primary" @click="guide" style="marginBottom:20px">新手指引</a-button>
    <a-row style="marginBottom:20px">
      <a-col :span="12" data-step="1" data-intro="第一步">测试1</a-col>
      <a-col :span="12" data-step="2" data-intro="第二步">测试2</a-col>
    </a-row>
    <a-row>
      <a-col :span="12" data-step="3" data-intro="第三步">测试3</a-col>
      <a-col :span="12" data-step="4" data-intro="第四步">测试4</a-col>
    </a-row>
    <div style="width:100%">
      <a-select
        show-search
        placeholder="Select a person"
        option-filter-prop="children"
        style="width: 200px"
        :filter-option="filterOption"
        @focus="handleFocus"
        @blur="handleBlur"
        @change="handleChange"
        v-model="searchdata"
      >
        <a-select-option value="jack">Jack</a-select-option>
        <a-select-option value="lucy">Lucy</a-select-option>
        <a-select-option value="tom">Tom</a-select-option>
      </a-select>
    </div>

    <div v-for="(item,index) in test" :key="index">
      <span v-if="item.indect== bv">{{item.name}}</span>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="500"
      @current-change="handleCurrentChange"
    ></el-pagination>

    <el-table :data="tableData" style="width: 100%" >
      <el-table-column prop="camera" label="相机" width="180"></el-table-column>
      <el-table-column prop="chassis" label="姓名" width="180"></el-table-column>
      <el-table-column prop="gnss" label="地址"></el-table-column>
      <el-table-column prop="lidar" label="雷达"></el-table-column>
      <el-table-column prop="v2x" label="v2x"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import introJs from "intro.js";
import "intro.js/introjs.css";
export default {
  data() {
    return {
      itemkey: "",
      tableData: [],
      searchdata: "",
      typeData: [
        { work_type: "好好靴子" },
        { work_type: "议案天向上" },
        { work_type: "好好靴子" },
      ], //任务类型数组
      test: [
        { id: 1, name: "张", indect: 0 },
        { id: 2, name: "李", indect: 0 },
        { id: 3, name: "王", indect: 0 },
        { id: 4, name: "鲍", indect: 0 },
        { id: 5, name: "梁", indect: 1 },
        { id: 6, name: "包", indect: 1 },
        { id: 7, name: "郑", indect: 1 },
        { id: 8, name: "柴", indect: 1 },
        { id: 9, name: "经", indect: 2 },
        { id: 10, name: "许", indect: 2 },
        { id: 11, name: "白", indect: 2 },
        { id: 12, name: "孙", indect: 2 },
      ],
      bv: 0,
      id: 0,
      acd: [
        {
          desc: "Normal",
          name: "v2x增加数据" + -1,
          state: 1,
          type: "v2x",
        },
      ],
    };
  },
  mounted() {
    // this.changeData();
    let that = this;
    that.id += 1;
    setInterval(() => {
      that.acd.push({
        desc: "Normal",
        name: "v2x增加数据" + that.id,
        state: 1,
        type: "v2x",
      });
      that.changeData(that.acd);
    }, 5000);
  },
  methods: {
    guide() {
      introJs()
        .setOptions({
          nextLabel: "下一个", // 下一个按钮文字
          prevLabel: "上一个", // 上一个按钮文字
          skipLabel: "跳过", // 跳过按钮文字
          doneLabel: "立即体验", // 完成按钮文字
          hidePrev: true, // 在第一步中是否隐藏上一个按钮
          hideNext: true, // 在最后一步中是否隐藏下一个按钮
          exitOnOverlayClick: false, // 点击叠加层时是否退出介绍
          showStepNumbers: false, // 是否显示红色圆圈的步骤编号
          disableInteraction: true, // 是否禁用与突出显示的框内的元素的交互，就是禁止点击
          showBullets: false, // 是否显示面板指示点
          tooltipClass: "red",
        })
        .start();
    },

    handleChange(value) {
      this.searchdata = value;
      console.log(`selected ${value}`);
      console.log(this.searchdata);
    },
    // 失焦事件
    handleBlur() {
      // if (this.searchdata != "") {
      //   this.handleChange(this.searchdata);
      // }
      console.log("blur", this.searchdata);
    },
    // 聚焦事件
    handleFocus() {
      console.log("focus", this.searchdata);
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );

      let arr = [];
      for (let index = 0; res.result < res.result.length; index++) {
        const element = res.result[index];
        if (element.manufacturer != null) {
          arr.push(element);
        }
      }
      this.manuList = arr;
    },
    handleCurrentChange(val) {
      this.bv = val;
    },

    changeData(a) {
      let c = [
        { desc: "Normal", name: "cam_f1", state: 1, type: "camera" },
        { desc: "Normal", name: "cam_fl1", state: 1, type: "camera" },
        { desc: "Normal", name: "cam_fl2", state: 1, type: "camera" },
        { desc: "Normal", name: "cam_fr1", state: 1, type: "camera" },
        { desc: "Normal", name: "cam_fr2", state: 1, type: "camera" },
        { desc: "Normal", name: "chassis", state: 1, type: "chassis" },
        { desc: "Normal", name: "daoyuan", state: 1, type: "gnss" },
        { desc: "Normal", name: "lidar_fm", state: 1, type: "lidar" },
        { desc: "Normal", name: "lidar_lf", state: 1, type: "lidar" },
        { desc: "Normal", name: "lidar_fm11", state: 1, type: "lidar" },
        { desc: "Normal", name: "lidar_lf22", state: 1, type: "lidar" },
        { desc: "Normal", name: "lidar_fm33", state: 1, type: "lidar" },
        { desc: "Normal", name: "lidar_lf44", state: 1, type: "lidar" },
        { desc: "Normal", name: "lidar_fm55", state: 1, type: "lidar" },
        { desc: "Normal", name: "lidar_lf66", state: 1, type: "lidar" },
        { desc: "Normal", name: "v2x", state: 1, type: "v2x" },
      ];
      let arr;
      if (a) {
        arr = c.concat(a);
      }

      // 定义一个用来存已经分好类数据的数组
      let arr2 = [];
      // 遍历数组
      for (var i = 0; i < arr.length; i++) {
        // 判断新定义的数组有没有值  没有值则减第一个类给他赋值上去
        if (arr2.length == 0) {
          arr2.push({
            name: arr[i].type,
            data: [arr[i]],
            length: [arr[i]].length,
          });
        } else {
          // 第一个完后 后面的有值了 使用findindex()方法进行比较 存在返回下标index 不存在则返回-1
          var index = arr2.findIndex((item) => {
            return item.name == arr[i].type;
          });
          // 判断index是否大于0 大于0则在该类的data push进该类别的数据
          if (index >= 0) {
            arr2[index].data.push(arr[i]);
          } else {
            // 不存在则新建一个对象  push 进arr2 里面 作为第二个类
            arr2.push({
              name: arr[i].type,
              data: [arr[i]],
              length: [arr[i]].length,
            });
          }
        }
      }
      // 寻找最大值下标
      let b = [];
      for (let index = 0; index < arr2.length; index++) {
        const element = arr2[index];
        b.push(element.data.length);
      }
      let loadPeak = Math.max(...b);
      let ee = b.findIndex((item) => item == loadPeak);
      console.log(arr2);
      console.log(loadPeak, ee);
      let endData = []; //最终的数据
      // arr2[ee].data 数据最长的为一行
      for (let index = 0; index < arr2[ee].data.length; index++) {
        const element = arr2[ee].data[index];
        let element1 = {
          ...element,
          chassis: "",
          gnss: "",
          lidar: "",
          camera: "",
          v2x: "",
        };
        let chassisTotal = arr2.find((item) => item.name == "chassis");
        let gnssTotal = arr2.find((item) => item.name == "gnss");
        let lidarTotal = arr2.find((item) => item.name == "lidar");
        let cameraTotal = arr2.find((item) => item.name == "camera");
        let v2xTotal = arr2.find((item) => item.name == "v2x");
        if (chassisTotal.data.length - 1 >= index)
          element1.chassis = chassisTotal.data[index].name;
        if (gnssTotal.data.length - 1 >= index)
          element1.gnss = gnssTotal.data[index].name;
        if (lidarTotal.data.length - 1 >= index)
          element1.lidar = lidarTotal.data[index].name;
        if (cameraTotal.data.length - 1 >= index)
          element1.camera = cameraTotal.data[index].name;
        if (v2xTotal.data.length - 1 >= index)
          element1.v2x = v2xTotal.data[index].name;
        endData.push(element1);
      }
      this.tableData = endData;
      this.itemkey = Math.random(); //在这边给key赋随机值
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
